<template>
	<view style="position: relative;" v-show="token!=null">
		<!-- 输入  -->
		<view class="input" >
			<textarea v-model="nodeMess"></textarea>
		</view>
		<!-- 图片 -->
		<view class="images">
			
			<view class="img" v-for="(item,index) in images">
				<image :src="item"> </image>
				<button @click="delImg(index)" type="" size="mini">X</button>
			</view>
			<image @click="uploadFile"	 src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"> </image>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<!-- 标签 -->
			<!-- <Select></Select> -->
			<!-- 免责声明 -->
			<view class="statment" style="font-size: 30rpx;color: #FF5A5F;text-align: center;position: fixed;bottom: 0px;">
				如果用发送图集后，图集有触碰版权、违反任何法律知识，由您自行承担！发送默认同意本条规
				<veiw>
					<button type="primary" @click="iis">发布</button>
				</veiw>
			</view>
			<!-- 提交 -->
		</view>
	</view>
</template>

<script>
	import Select from "../../compoent/select/select.vue" 
	export default {
		components:{Select},
		data() {
			return {
				token:null,
				images:[
				]
			}
		},
		onShow() {
			var that = this
			var a = ""
			uni.getStorage({
				key: 'token',
				success(va){
					a=va.data
					that.token = va.data
				},
				fail() {
					uni.showModal({
						content:"请登录",
					})
					that.token=null
				
				}
			})
		},
		methods: {
			
			iis(){
				
				var that = this 
				var img = "";
				// 遍历图片
				for (var i = 0; i < this.images.length; i++) {
					img+=this.images[i]+","
				}
				img.split(0,img.length-1)
				var obj = {
					nodeMess:this.nodeMess,
					nodeImages:img,
					nodeTag:"7",
					nodeCommentFlag:true,
					nodeLike:0
				}
				uni.request({
					url:"https://app.waghost.com/api/node/putNode",
					method:"PUT",
					header:{
						"Authorization":"TOKEN "+that.token,
						"Content-Type":"application/x-www-form-urlencoded"
					},
					data:obj,
					success(va) {
						if(va.data.code==200){
							uni.showToast({
								title:"发布成功"
							})
							uni.navigateTo({
								url:"../details/details?id="+va.data.data
							})
						}
					}
					
				})
			},
			delImg(va){
				this.images.splice(va,1)
			},
			uploadFile(){
				var that = this
				
				uni.getStorage({
					key:"token",
					success(va){
						that.token = va.data
					},
					fail() {
						uni.showModal({
							content:"请登录"
						})
						uni.navigateTo()({
							url:"../index/index"
						})
					}
				})
				
				uni.showLoading({
					title:"上传中",
					mask:true
				})
				uni.chooseImage({
					success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							for (var i = 0; i < tempFilePaths.length; i++) {
								if(that.images.length>8){
									uni.showModal({
										content:"非会员最多提交8张图片"
									})
								}
								uni.uploadFile({
									url:"https://app.waghost.com/api/file/uploadFile", //仅为示例，非真实的接口地址
									filePath: tempFilePaths[i],
									name: 'file',
									header:{
											"Authorization":"TOKEN "+that.token
									},
									formData: {
										'user': 'test'
									},
									success: (uploadFileRes) => {
										var a = JSON.parse(uploadFileRes.data)
										if(a.code==301){
											uni.showModal({
												content:"请进行登录"
											})
											uni.navigateTo({
												url:"../index/index"
											})
											return;
										}
										that.images.push(a.data)
										
									}
								});
							}
							uni.hideLoading()
						},
						fail() {
							uni.hideLoading()
						}
				})
				
			}
		}
	}
</script>

<style scoped>
	.input{
		height: 300rpx;
		padding: 10px;
		box-sizing: border-box;
	}
	.input>textarea{
		padding: 10px;
		width: 100%;
		height: 100%;
		background: #D9B018;
		border-radius: 15rpx;
		box-sizing: border-box;
	}
	.images{
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	.images image{
		width: 200rpx;
		height: 200rpx;
	}
	.img{
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		margin-bottom: 15rpx;
		position: relative;
	}
	.img>button{
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		border-radius: 50%;
		width: 50rpx;
		text-align: center;
		height: 50rpx;
		padding: 0;
		line-height: 50rpx;
	}
	.bottom{
		height: 300rpx;
		position: fixed;
		width: 100%;
		bottom: 0px;
	}
</style>
